<template>
  <div>
    <el-card style="z-index: -1; width: 95%; margin-left: 1%; margin-top: 1%">
      <!-- Tabs -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="全部计划" name="all">
          <!-- Table -->

          <el-row style="margin-bottom: 20px">
            <el-col :span="12">
              <el-button type="primary" @click="add">新建</el-button>
              <el-button @click="deletePlan">删除</el-button>
              <el-button @click="adjustScheme">调整计划</el-button>
              <el-button>导出</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <!-- Search -->
              <el-input v-model="condition1" placeholder="请输入计划编号或名称" @keyup.enter.native="searchall()"
                style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="searchall()"></el-button>
              </el-input>
            </el-col>
          </el-row>

          <!-- Table -->
          <el-table :data="tableData1.records" @selection-change="AllSelectionChange" border="0" style="width: 100%"
            align="center" sortable>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="100" fixed align="center"> <template slot-scope="scope">
                {{ (currentPage1 - 1) * size1 + scope.$index + 1 }}
              </template></el-table-column>
            <el-table-column label="操作" width="140" fixed align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="patrolschemeType" label="状态" align="center" width="180"></el-table-column>
            <el-table-column prop="code" label="计划编号" align="center" width="120"></el-table-column>
            <el-table-column prop="patrolschemeName" label="计划名称" width="160" align="center"></el-table-column>
            <el-table-column prop="patrolschemeDaytypeId" label="计划类型" width="120" align="center"></el-table-column>
            <el-table-column prop="deviceExecution.executionName" label="执行周期规则" width="150"
              align="center"></el-table-column>
            <el-table-column prop="patrolschemeOntime" label="计划开始时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeUntime" label="计划结束时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeClass" label="点检班组" align="center" width="140"></el-table-column>
            <el-table-column prop="patrolschemePerson" label="点检人" align="center" width="140"></el-table-column>
            <el-table-column prop="notas" label="备注" align="center" width="200"></el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px">
            <el-pagination background layout="prev, pager, next, sizes, total" :total="this.tableData1.total"
              :page-size="this.tableData1.size" :sizes="this.tableData1.size" :page-sizes="pageselect"
              @size-change="AllSizeChange" :current-page="this.tableData1.current" @current-change="AllCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- ------------我的计划-------------- -->
        <el-tab-pane label="我的计划" name="mine" @tab-click="getMyPlan">
          <el-row style="margin-bottom: 20px">
            <el-col :span="12">
              <el-button type="primary" @click="add">新建</el-button>
              <el-button>删除</el-button>
              <el-button @click="dialogVisible = true">调整计划</el-button>
              <el-button>导出</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <!-- Search -->
              <el-input v-model="condition2" placeholder="请输入计划编号或名称" @keyup.enter.native="searchmine()"
                style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="searchmine()"></el-button>
              </el-input>
            </el-col>
          </el-row>

          <!-- Table -->
          <el-table :data="tableData2.records" @selection-change="MineSelectionChange" border="0" style="width: 100%"
            align="center" sortable>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="100" fixed align="center"> <template slot-scope="scope">
                {{ (currentPage2 - 1) * size2 + scope.$index + 1 }}
              </template></el-table-column>
            <el-table-column label="操作" width="140" fixed align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="patrolschemeType" label="状态" align="center" width="180"></el-table-column>
            <el-table-column prop="code" label="计划编号" align="center" width="120"></el-table-column>
            <el-table-column prop="patrolschemeName" label="计划名称" width="160" align="center"></el-table-column>
            <el-table-column prop="patrolschemeDaytypeId" label="计划类型" width="120" align="center"></el-table-column>
            <el-table-column prop="deviceExecution.executionName" label="执行周期规则" width="150"
              align="center"></el-table-column>
            <el-table-column prop="patrolschemeOntime" label="计划开始时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeUntime" label="计划结束时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeClass" label="巡检班组" align="center" width="140"></el-table-column>
            <el-table-column prop="patrolschemePerson" label="巡检人" align="center" width="140"></el-table-column>
            <el-table-column prop="notas" label="备注" align="center" width="200"></el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px">
            <el-pagination background layout="prev, pager, next, sizes, total" :total="this.tableData2.total"
              :page-size="this.tableData2.size" :sizes="this.tableData2.size" :page-sizes="pageselect"
              @size-change="MineSizeChange" :current-page="this.tableData2.current" @current-change="MineCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 我的审核 -->
        <el-tab-pane label="我的审核" name="review" @tab-click="getMyReview">
          <!-- Table -->

          <el-row style="margin-bottom: 20px">
            <el-col :span="12">
              <el-button type="primary" @click="add">新建</el-button>
              <el-button>删除</el-button>
              <el-button @click="dialogVisible = true">调整计划</el-button>
              <el-button>导出</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <!-- Search -->
              <el-input v-model="condition3" placeholder="请输入计划编号或名称" @keyup.enter.native="searchreview()"
                style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="searchreview()"></el-button>
              </el-input>
            </el-col>
          </el-row>

          <!-- Table -->
          <el-table :data="tableData3.records" @selection-change="ReviewSelectionChange" border="0" style="width: 100%"
            align="center" sortable>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="index" label="序号" width="100" fixed align="center"> <template slot-scope="scope">
                {{ (currentPage3 - 1) * size3 + scope.$index + 1 }}
              </template></el-table-column>
            <el-table-column label="操作" width="140" fixed align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="patrolschemeType" label="状态" align="center" width="180"></el-table-column>
            <el-table-column prop="code" label="计划编号" align="center" width="120"></el-table-column>
            <el-table-column prop="patrolschemeName" label="计划名称" width="160" align="center"></el-table-column>
            <el-table-column prop="patrolschemeDaytypeId" label="计划类型" width="120" align="center"></el-table-column>
            <el-table-column prop="deviceExecution.executionName" label="执行周期规则" width="150"
              align="center"></el-table-column>
            <el-table-column prop="patrolschemeOntime" label="计划开始时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeUntime" label="计划结束时间" width="240" align="center"></el-table-column>
            <el-table-column prop="patrolschemeClass" label="点检班组" align="center" width="140"></el-table-column>
            <el-table-column prop="patrolschemePerson" label="点检人" align="center" width="140"></el-table-column>
            <el-table-column prop="notas" label="备注" align="center" width="200"></el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px">
            <el-pagination background layout="prev, pager, next, sizes, total" :total="this.tableData3.total"
              :page-size="this.tableData3.size" :sizes="this.tableData3.size" :page-sizes="pageselect"
              @size-change="ReviewSizeChange" :current-page="this.tableData3.current"
              @current-change="ReviewCurrentChange">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog v-model="dialogVisible" :visible.sync="dialogVisible" style="width: 150%; margin-left: -25%">
        <span>任务调整</span>
        <el-divider></el-divider>

        <el-form label-width="150px">
          <el-row :gutter="20">
            <el-col span="12">
              <el-form-item label="计划编号">
                <el-input style="width: 400px" v-model="scheme.code" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="计划名称">
                <el-input style="width: 400px" disabled v-model="scheme.patrolschemeName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col span="12">
              <el-form-item label="计划开始时间">
                <el-input style="width: 400px" disabled v-model="scheme.patrolschemeOntime"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="计划结束时间">
                <el-input style="width: 400px" disabled v-model="scheme.patrolschemeUntime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col span="12">
              <el-form-item label="巡检班组">
                <el-input style="width: 400px" disabled v-model="scheme.patrolschemeClass"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="巡检人">
                <el-input style="width: 400px" disabled v-model="scheme.patrolschemePerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col span="12">
              <el-form-item label="*调整类型">
                <el-select v-model="value" placeholder="Select" size="large" style="width: 400px">
                  <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-span v-if="value == '调整计划时间'">
            <el-row :gutter="20">
              <el-col span="12">
                <el-form-item label="*调整结束时间">
                  <el-date-picker v-model="scheme2.updateTime" type="date" placeholder="请选择日期" :size="size"
                    style="width: 400px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="*调整原因">
                  <el-input type="textarea" :rows="4" style="width: 800px" placeholder="请输入"
                    v-model="scheme2.cause"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-span>
          <el-span v-if="value == '修改巡检执行人'">
            <el-row>
              <el-col span="12">
                <el-form-item label="更改班组">
                  <el-input v-model="scheme2.patrolschemeClass" style="width: 400px" placeholder="请输入"
                    @focus="group = true">
                    <el-button slot="append" icon="el-icon-search" @click="group = true"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="巡检人" style="margin-left: 10px">
                  <el-input v-model="scheme2.patrolschemePerson" style="width: 400px" placeholder="请输入"
                    @focus="clerk = true">
                    <el-button slot="append" icon="el-icon-search" @click="clerk = true"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="*调整原因">
                  <el-input type="textarea" :rows="4" style="width: 800px" v-model="scheme2.cause"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-span>
          <el-divider></el-divider>
          <div style="text-align: right">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
          </div>
        </el-form>
      </el-dialog>
      <!-- 选择班组 -->
      <el-dialog v-model="group" :visible.sync="group" style="width: 80%; margin-left: 20%">
        <span>选择班组</span>
        <el-divider></el-divider>

        <el-form @submit.native.enter.prevent>
          <el-form-item>
            <el-input placeholder="请输入" v-model="condition" @keyup.enter.native="classSearch()">
              <i slot="suffix" class="el-icon-search"></i>
            </el-input>
          </el-form-item>
        </el-form>

        <el-table :data="classList.records" border stripe ref="tableRef1" @row-click="singleElection"
          highlight-current-row>
          <el-table-column label="序号" width="65" prop="classId" align="center">
          </el-table-column>
          <el-table-column label="班组名称" prop="className" align="center"></el-table-column>
          <el-table-column label="班组人数" align="center"></el-table-column>
        </el-table>
        <div style="text-align: right">
          <el-pagination background layout="prev, pager, next, jumper,total" :total="this.classList.total"
            :page-size="this.classList.size" @current-change="handleCurrentChange" @size-change="handleSizeChange"
            :page-sizes="[10, 20, 30, 40, 50]">
          </el-pagination>
        </div>
        <el-divider></el-divider>
        <div style="text-align: right">
          <el-button @click="group = false">取消</el-button>
          <el-button type="primary" @click="classSubmit">确认</el-button>
        </div>
      </el-dialog>

      <!-- 巡检人 -->
      <el-dialog v-model="clerk" :visible.sync="clerk" style="width: 80%; margin-left: 20%">
        <span>{{ this.scheme2.patrolschemeClass }}_选择人员</span>
        <el-divider></el-divider>

        <el-form>
          <el-form-item>
            <el-input placeholder="请输入">
              <i slot="suffix" class="el-icon-search"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <el-table ref="tableRef2" :data="userList" highlight-current-row @row-click="singleElection" border>
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="用户名" prop="userName"></el-table-column>
          <el-table-column label="姓名" prop="nickName"></el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
        <el-divider></el-divider>
        <div style="text-align: right">
          <el-button @click="clerk = false">取消</el-button>
          <el-button type="primary" @click="clerkSubmit">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { listUser } from "@/api/system/user";
import { classList, del } from "@/api/inspection/inspectionPlan";
import { adjust } from "@/api/inspection/inspectionPlan";

export default {
  data() {
    return {
      value: "调整计划时间",
      dialogVisible: false,
      activeTab: "all",
      search: "",
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage: 1,
      pageSize: 10,
      pageselect: [10, 20, 30, 40, 50],
      size1: 2,
      size2: 2,
      size3: 2,
      page: 1,
      size: 2,
      condition: "",
      condition1: "",
      condition2: "",
      condition3: "",
      group: false,
      clerk: false,
      templateSelection: "",
      tableData1: [],
      tableData2: [],
      tableData3: [],
      classList: [],
      userList: [],
      scheme: [],
      mulitiSelect: [],
      scheme2: {
        updateTime: "",
        cause: "",
        patrolschemeClass: "",
        patrolschemePerson: "",
        code: ""
      },
      schemeClass: "",
      schemePerson: "",
      total: 0,
      type: [
        {
          value: 1,
          label: "调整计划时间",
        },
        { value: 2, label: "修改巡检执行人" },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
    };
  },
  mounted() {
    this.init();
    this.user();
    this.groupSearch();
  },
  computed: {
    diplay() {
      return this.value
    }
  },
  methods: {
    init(val) {
      axios
        .get("http://localhost:9286/scheme/schemeList", {
          params: { page: this.currentPage1, size: this.size1, condition: val, type: "" },
        })
        .then((res) => {
          this.tableData1 = res.data;
          console.log(res.data);
        })
        .catch((err) => { });
      this.getMyPlan(val);
      this.getMyReview(val);
    },
    user() {
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        console.log(response.rows);
      }
      );
    },
    groupSearch() {
      classList(this.currentPage, this.pageSize, this.condition)
        .then((res) => {
          console.log(res.data);
          this.classList = res.data;
        })
        .catch((res) => { });
    },
    classSubmit() {
      this.group = false;
      this.scheme2.patrolschemeClass = this.templateSelection.className;
      console.log(this.templateSelection);
    },
    clerkSubmit() {
      console.log(this.templateSelection);
      this.clerk = false;
      this.scheme2.patrolschemePerson = this.templateSelection.userName;
    },
    confirm() {
      this.dialogVisible = false;
      if (this.scheme2.patrolschemeClass == "" || this.scheme2.patrolschemePerson == "") {
        this.scheme2.patrolschemeClass = this.scheme.patrolschemeClass;
        this.scheme2.patrolschemePerson = this.scheme.patrolschemePerson;
      }
      if (this.scheme2.updateTime == "") {
        this.scheme2.updateTime = this.scheme.updateTime;
      }
      this.scheme2.code = this.scheme.code;
      adjust(this.scheme2).then((res) => {
        if (res.data == "修改成功") {
          this.init();
          this.$message.success("调整成功");
          this.mulitiSelect.clearSelection();
        } else {
          this.$message.error("调整失败");
          this.dialogVisible = true;
        }
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val;

    },

    handleSizeChange(size) {
      this.pageSize = size;

    },
    getMyPlan(val) {
      axios
        .get("http://localhost:9286/scheme/schemeList", {
          params: { page: this.currentPage2, size: this.size2, condition: this.condition2, type: "", name: this.$store.state.user.name },
        })
        .then((res) => {
          this.tableData2 = res.data;
          console.log(res.data);
        })
        .catch((err) => { });
    },
    getMyReview(val) {
      axios
        .get("http://localhost:9286/scheme/schemeList", {
          params: {
            page: this.currentPage3,
            size: this.size3,
            condition: val,
            type: "待审核",
            name: this.$store.state.user.name,
          },
        })
        .then((res) => {
          this.tableData3 = res.data;
          console.log("t3", res.data);
        })
        .catch((err) => { });
    },
    handleView(row) {
      this.$router.push({ path: "/xun/xun/planSe", query: row });
    },
    AllSelectionChange(val) {
      this.mulitiSelect = val;
    },
    MineSelectionChange(val) {
      this.mulitiSelect = val;
    },
    ReviewSelectionChange(val) {
      this.mulitiSelect = val;
    },
    AllCurrentChange(val) {
      this.currentPage1 = val;
      this.init();
    },
    MineCurrentChange(val) {
      this.currentPage2 = val;
      this.init();
    },
    ReviewCurrentChange(val) {
      this.currentPage3 = val;
      this.init();
    },
    AllSizeChange(size) {
      this.size1 = size;
      console.log(size);
      this.init();
    },
    MineSizeChange(size) {
      this.size2 = size;
      console.log(size);
      this.init();
    },
    ReviewSizeChange(size) {
      this.size3 = size;
      console.log(size);
      this.init();
    },
    add() {
      this.$router.push({ path: "/xun/xun/planadd" });
    },
    searchall() {
      this.init(this.condition1);
    },
    searchmine() {
      this.getMyPlan(this.condition2);
    },
    searchallreview() {
      this.getMyReview(this.condition3);
    },
    adjustScheme() {
      console.log(this.templateSelection);
      if (this.mulitiSelect.length == 0) {
        this.$message.error("请选择需要调整的计划");
      } else {
        this.dialogVisible = true;
        this.scheme = this.mulitiSelect[0];
        console.log(this.scheme);
      }

    },
    singleElection(index) {
      console.log(index);
      this.templateSelection = index;
      console.log(this.templateSelection);
    }, deletePlan() {
      if (this.mulitiSelect.length == 0) {
        this.$message.error("请选择需要删除的计划");
      } else {
        this.$confirm("此操作将永久删除该计划, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          del(this.mulitiSelect[0].patrolschemeId, this.mulitiSelect[0].status,this.mulitiSelect[0].code).then((res) => {
            if (res.data == "删除成功") {
              this.init();
              this.$message.success("删除成功");
              this.mulitiSelect.clearSelection();
            } else {
              this.$message.error("删除失败");
            }
          })
        });
      }
    }

  },
};
</script>
